<template>
  <div class="home-nav">
    <ul class="nav-main">
      <li v-for="item of NavList"><router-link  :to="item.DiUrl"><img :src="item.imgUrl" alt=""></router-link><h6>{{item.desc}}</h6></li>
    </ul>
  </div>
</template>

<script>
  export default  {
    name: 'HomeNav',
    data()  {
      return  {
         "NavList": [{
            "id": "0001",
            "imgUrl": "http://m.shhuamei.cn/imgV3/nav1.jpg",
            "desc": "经典项目",
            "DiUrl":  ""
          },{
            "id": "0002",
            "imgUrl": "http://m.shhuamei.cn/imgV3/nav2.jpg",
            "desc": "美丽相册",
             "DiUrl":  ""
          },{
            "id": "0003",
            "imgUrl": "http://m.shhuamei.cn/imgV3/nav3.jpg",
            "desc": "星座馆",
             "DiUrl":  "/xingzuo"
          },{
            "id": "0004",
            "imgUrl": "http://m.shhuamei.cn/imgV3/nav4.jpg",
            "desc": "特邀医生",
             "DiUrl":  ""
          },{
            "id": "0005",
            "imgUrl": "http://m.shhuamei.cn/imgV3/nav5.jpg",
            "desc": "品牌",
             "DiUrl":  ""
          },{
            "id": "0006",
            "imgUrl": "http://m.shhuamei.cn/imgV3/nav6.jpg",
            "desc": "安全/服务",
             "DiUrl":  ""
          },{
            "id": "0007",
            "imgUrl": "http://m.shhuamei.cn/imgV3/nav7.jpg",
            "desc": "来院路线",
             "DiUrl":  ""
          },{
            "id": "0008",
            "imgUrl": "http://m.shhuamei.cn/imgV3/nav8.jpg",
            "desc": "关于我们",
             "DiUrl":  ""
          }]
        }
    }
  }
</script>

<style >
  .home-nav{
    padding:1;

  }
  .nav-main{
   display:flex;
   flex-wrap:wrap;
   font-size:0;
  }
  .nav-main li{
    width:25%;
    text-align:center;
    position: relative;
  }
  .nav-main li::before{
   position: absolute;
    top: -4%;
    left: 0;
    padding-top: 100%;
    width: 100%;
    background: url(http://m.shhuamei.cn/imgV3/sd1.png) no-repeat center;
    background-size: 100% auto;
    content: "";
    -webkit-background-size: 100% auto;
  }
  .nav-main li img{    width: 70%;
    border-radius: 100%;
    margin: 0px auto;}
    .nav-main li h6{
      font-size:0.16rem;
    color: #7d7d7d;
    line-height: 0.34rem;}
     .nav-main li a{
          position: relative;
          z-index: 10;
     }
</style>
